<template>
  <div id="activeList">
    <h1 class="con-right-title">
      运营审核
    </h1>
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="活动编号(ID)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="activityInfo.type" label="活动类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.activityInfo.type" class="tag-span">{{
            scope.row.activityInfo.type | filterName('activeType')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="activityDisplay.displayName"
        label="活动名称"
        align="center"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="order"
        label="活动排序"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="活动时间" min-width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.rules.startDate + '-' + scope.row.rules.endDate }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="活动状态" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.state === 'RELEASE'">
            已发布
          </div>
          <div v-else-if="scope.row.state === 'ONGOING'">
            进行中
          </div>
          <div
            v-else-if="
              scope.row.state === 'UN_RELEASE' || scope.row.state === 'SUBMIT'
            "
          >
            未发布
          </div>
          <div v-else-if="scope.row.state === 'OVER'">
            已结束
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="twoAuditingState" label="二审状态" align="center">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState ===
                'UNAUDITED'
            "
            class="tag-span warning"
            >未审核</span
          >
          <span
            v-else-if="
              scope.row.activityAuditing.twoAuditing.auditingState === 'PASS'
            "
            class="tag-span primary"
            >通过</span
          >
          <span
            v-else
            class="tag-span danger"
            @click="showFailReason(scope.row)"
            >未通过</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="activityInfo.createdDate"
        label="创建时间"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        prop="twoAuditingState"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <div
            v-permission="'wh:system:operationActivity:audit'"
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState ===
                'UNAUDITED'
            "
          >
            <el-button type="text" @click="pass(scope.row)">
              审核通过
            </el-button>
            <el-button type="text" @click="noPass(scope.row)">
              不通过
            </el-button>
          </div>
          <el-button
            v-permission="'wh:system:operationActivity:order'"
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState === 'PASS'
            "
            type="text"
            @click="editSort(scope.row.id, scope.row.order)"
          >
            编辑排序
          </el-button>
          <el-button type="text" @click="openDetail(scope.row)">
            查看详情
          </el-button>
          <el-button
            v-if="
              scope.row.activityAuditing.twoAuditing.auditingState === 'PASS' &&
                scope.row.state === 'OVER'
            "
            type="text"
            @click="exportUser(scope.row)"
          >
            导出参与用户
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 编辑活动排序对话框 -->
    <edit-dialog
      v-if="editDialogData.isShow"
      :edit-dialog-data="editDialogData"
      @refresh="refresh"
    ></edit-dialog>
    <!-- 身份验证通过对话框 -->
    <authentication-dialog
      :auth-dialog-data="authDialogData"
      from="active"
    ></authentication-dialog>
    <!-- 审核不通过对话框 -->
    <no-pass-dialog
      :no-pass-dialog-data="noPassDialogData"
      v-if="noPassDialogData.isShow"
      @refresh="refresh"
    ></no-pass-dialog>
    <!-- 详情弹窗 -->
    <detail-dialog
      :detail-dialog-data="detailDialogData"
      v-if="detailDialogData.isShow"
    ></detail-dialog>
  </div>
</template>
<script>
import topSearch from '@component/operate/active/topSearch' // 上部搜索条件
import authenticationDialog from '@component/common/authenticationDialog' // 公共身份验证框
import noPassDialog from '@component/operate/active/noPassDialog' // 审核不通过对话框
import editDialog from '@component/operate/active/editDialog' // 编辑活动排序对话框
import detailDialog from '@component/operate/active/detailDialog'
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  passRequestAPI,
  downUrl,
  getNoticeTypeAPI
} from '@/api/operate/active'

export default {
  name: 'activeList',
  msg: '运营管理-活动管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    authenticationDialog,
    noPassDialog,
    editDialog,
    detailDialog
  },
  data() {
    return {
      formInline: {
        state: '', // 活动状态
        twoAuditingState: '', // 二审状态,默认全部
        activityType: '', // 活动类型,默认全部
        searchContent: '', // 活动编号
        createTime: '', // 选择的时间
        startTime: '',
        endTime: ''
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: [],
      // 编辑活动排序对话框
      editDialogData: {
        isShow: false, // 控制审核通过对话框显示
        id: '', // 传递的参数
        order: ''
      },
      // 身份验证对话框
      authDialogData: {
        isShow: true, // 控制审核通过对话框显示
        params: '' // 传递的参数
      },
      // 审核不通过对话框
      noPassDialogData: {
        isShow: false, // 控制不通过对话框显示
        params: '' // 传递的参数
      },
      // 详情对话框
      detailDialogData: {
        isShow: false,
        id: ''
      },
      total: 0, // 总数,
      powerAry: [],
      canShowPage: false,
      powerStr: 'system:operationActivity:list',
      loading: true
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
        }
      })
    },
    // 查询列表
    searchList() {
      this.loading = true
      let params = { ...this.formInline, ...this.searchParams }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 审核通过操作
    pass(row) {
      this.$confirm('确定审核通过该条活动信息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.getNoticeType(row.id)
        })
        .catch(() => {})
    },
    // 审核不通过操作
    noPass(row) {
      this.noPassDialogData.params = row
      this.noPassDialogData.isShow = true // 显示审核不通过对话框
    },
    // 审核前预查询
    getNoticeType(id) {
      getNoticeTypeAPI(
        id,
        (response) => {
          let noticeType = response.touchType
          let noticeTypeName = ''
          if (noticeType && noticeType.includes('SMS')) {
            noticeTypeName = '短信'
          } else if (noticeType && noticeType.includes('PUSH')) {
            noticeTypeName = '推送'
          }
          let tips = `<span style="color:red;font-weight:bold;">当前选择的触达方式为“${noticeTypeName}”消息${noticeTypeName}是收费项目，${noticeTypeName}将会产生实际费用！确定要使用“${noticeTypeName}”方式发布通知吗？</span>`
          if (
            (noticeType && noticeType.includes('SMS')) ||
            (noticeType && noticeType.includes('PUSH'))
          ) {
            this.$confirm(tips, '提示', {
              dangerouslyUseHTMLString: true,
              confirmButtonText: '我确认',
              cancelButtonText: '我再想想',
              type: 'warning'
            })
              .then(() => {
                this.passRequest(id)
              })
              .catch(() => {})
          } else {
            this.passRequest(id)
          }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 审核通过请求
    passRequest(id) {
      passRequestAPI(
        id,
        (response) => {
          this.$message({
            type: 'success',
            message: '审核通过!'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 导出参与用户
    exportUser(row) {
      this.$confirm('确定导出参与用户吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let id = row.id
          let url = downUrl(id)
          this.downFile('get', url, '', '参与用户')
        })
        .catch(() => {})
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 编辑活动排序
    editSort(id, order) {
      this.editDialogData.isShow = true
      this.editDialogData.id = id
      this.editDialogData.order = order
    },
    // 点击未通过显示未通过原因
    showFailReason(row) {
      this.$alert(`${row.activityAuditing.twoAuditing.remark}`, '系统提示', {
        confirmButtonText: '确认'
      })
    },
    // 查看详情
    openDetail(row) {
      this.detailDialogData.isShow = true
      this.detailDialogData.id = row.id
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    refresh() {
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped></style>
